<!--
  *@Description : 这里是商品详情页
  *@author 萧红
  *@date 2020-04-01 21:54
  *@LastEditTime 2020-04-01 21:54
  *@LastEdititors
-->
<template>
    <div id="shopdetail">
      <tittle :title="'商品详情'"></tittle>
      <div :style="{height: $inerHeight + 45 + 'px'}">
        <cube-scroll :data="[1,2,3,4]" :scrollEvents="['scroll-end']" @scroll-end="scrollEnd">
          <div class="media">
            <div class="btn">
              <div class="video-btn" @click="isShowVideo=true;" :class="{active:isShowVideo}">视频</div>
              <div class="img-btn" @click="isShowVideo=false;" :class="{active:!isShowVideo}">图片</div>
            </div>
            <cube-slide ref="slide" :data="[1,2,3,4]" :autoPlay="false" class="myslide" :initialIndex="initialIndex" :showDots="false" @scroll-end="slideChange">
              <cube-slide-item class="videoBox" :key="0" v-if="productData.hasVideo">
                <!--<video id="myVideo" class="myVideo video-js" width="100%" height="100%" @click.self="changeViDeoState"  :webkit-playsinline="isInViewArea" :x5-playsinline="isInViewArea?'x5-playsinline':'false'" :playsinline="isInViewArea">-->
                <video id="myVideo" class="myVideo video-js" width="100%" height="100%" @click.self="changeViDeoState">
                  <source  :src="productData.videoUrl" type="video/mp4">
                </video>
              </cube-slide-item>
              <cube-slide-item v-for="(img,index) in productData.imgs" :key="index+1" class="imgBox">
                <img :src="img" alt="">
              </cube-slide-item>
            </cube-slide>
          </div>
          <div class="other">
            <div class="m10">
              <p class="js_name proname">{{productData.productName}}</p>
              <div>
                <span class="color-red">￥</span>
                <span class="color-red">199</span>
              </div>
              <div class="row2">
                <span>邮费: {{productData.youfei===0 ? '包邮' : `￥${productData.youfei}`}}</span>
                <span>库存: {{productData.totalInventory}}</span>
                <span>{{productData.showChangNumber}}人以种草</span>
              </div>
              <div class="gray-line"></div>
            </div>
            <div class="row3">
              <span>
                <i class="cubeic-right"></i>
                正品保证
              </span>
              <span>
                <i class="cubeic-right"></i>
                支持7天无理由退货
              </span>
            </div>
            <div class="pay">
              <div style="width: 40%;text-align: left;">支付</div>
              <div class="way">
                <div>
                  <i class="iconfont icon-zhifubao" style="color: #1856ff;"></i>
                  <span>支付宝</span>
                </div>
                <div>
                  <i class="iconfont iconweixin" style="color: #38c059;"></i>
                  <span>微信</span>
                </div>
                <div>
                  <i class="iconfont iconhuabei" style="color: #1856ff;"></i>
                  <span>花呗</span>
                </div>
              </div>
            </div>
            <div class="select-area" @click="showSelectPop(0)">
              {{selectedStyle.name === '' || selectedStyle.size === '' ? '请选择 颜色 尺码': `已选择:${selectedStyle.name} ${selectedStyle.size}`}}
              <span class="cubeic-arrow" style="float: right"></span>
            </div>
          </div>
          <div class="infoImgArea">
            <img :src="imgUrl" alt="" v-for="(imgUrl,index) in productData.infoImgs" :key="index">
          </div>
        </cube-scroll>
      </div>
      <shop-bottom @showSelect="showSelectPop"></shop-bottom>
      <!--单击选择颜色尺码的界面-->
      <cube-popup type="my-popup" :position="'bottom'" :mask-closable="true" ref="selectPop">
        <div :style="{height: $inerHeight * 0.85 + 'px',background: 'white'}" class="selectMemo">
          <div class="product-info">
            <div class="product-img">
              <img :src="selectedStyle.img" alt="">
            </div>
            <div class="otherInfo">
              <div class="price-number">￥{{selectedStyle.price}}</div>
              <div>库存 {{selectedStyle.Inventory}}</div>
              <div>{{selectedStyle.name === '' || selectedStyle.size === '' ? '请选择 颜色 尺码': `已选择:${selectedStyle.name} ${selectedStyle.size}`}}</div>
            </div>
            <div class="close-btn" @click="closeSelectMemu">
              <i class="cubeic-close"></i>
            </div>
          </div>
          <!--尺寸区域-->
          <div class="size-area">
            <div>尺码</div>
            <span v-for="(size,index) in productData.size" :key="index" @click="selectSize(size)" class="size">
              {{size}}
            </span>
          </div>
          <!--样式颜色区域-->
          <div class="style-area">
            <p>样式</p>
            <div class="yangshi" v-for="(styleItem,index) in productData.style" :key="index" @click="selectStyle(styleItem)">
              {{styleItem.name}}
            </div>
          </div>
          <div class="number">
            <span class="buytit">购买数量</span>
            <cube-input v-model.number="buyNumber" class="input-number" type="number" @change="checkNumber">
              <i class="cubeic-remove" slot="prepend" @click="buyNumber===1?false:changeNumber(-1)" :class="{habit:buyNumber===1}"></i>
              <i class="cubeic-add" slot="append" @click="buyNumber>selectedStyle.Inventory?false:changeNumber(1)" :class="{habit:buyNumber>selectedStyle.Inventory}"></i>
            </cube-input>
          </div>
          <div class="btn-group" v-show="selectMemuState===0">
            <div class="addcar" @click="addcar">
              加入购物车
            </div>
            <div class="buy" @click="buy">
              立即剁手
            </div>
          </div>
          <div class="confirm" v-if="selectMemuState!==0" @click="clickConfirm">
            确定
          </div>
        </div>
      </cube-popup>
    </div>
</template>

<script>
import shopBottom from '../../components/ShopBottom'
import Tittle from '../../components/Tittle'
export default {
  name: 'shopDetail',
  components: {
    shopBottom,
    Tittle
  },
  mounted () {
    this.myVideo = document.getElementById('myVideo')
    /* eslint-disable-next-line */
    let myPlayer = this.$video(myVideo, {
      // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
      controls: 'controls',
      // 自动播放属性,muted:静音播放
      autoplay: false,
      // 建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
      preload: 'true',
      // 设置视频播放器的显示宽度（以像素为单位）
      width: '100%',
      // 设置视频播放器的显示高度（以像素为单位）
      height: '100%',
      fluid: true
      // poster:
    })
    this.$refs.slide.refresh()
  },
  watch: {
    count (value) {
      if (value !== 0) {
        this.isShowVideo = false
      } else {
        this.isShowVideo = true
        if (this.myVideo.paused) {
        } else {
          this.myVideo.pause()
        }
      }
    },
    isInViewArea (value) {
      if (!value) {
        this.myVideo.requestPictureInPicture().catch(err => {
          console.log(err, '进入画中画失败')
        })
      } else {
        // 退出画中画
        document.exitPictureInPicture().catch(err => {
          console.log(err, '退出画中画失败')
        })
      }
    }
  },
  data () {
    return {
      selectMemuState: 0, // 标致是从哪里进入的选择颜色，尺码界面,1 加入购物车，2购买，0就是从主界面选择样式颜色进来的不是通过底部
      selectedStyle: {
        name: '',
        price: 199.9,
        Inventory: 90,
        size: '',
        img: '../../../static/product/100/1.jpg'
      }, // 用户选择的那个样式规格
      buyNumber: 1, // 用户购买的数量或者加入购物车的数量
      isInViewArea: true,
      myVideo: null,
      initialIndex: 0,
      count: 0,
      imgs: ['../../../static/product/100/1.jpg',
        '../../../static/product/100/2.jpg',
        '../../../static/product/100/3.jpg',
        '../../../static/product/100/4.jpg',
        '../../../static/product/100/5.jpg'],
      isShowVideo: true,
      infoImgs: [
        '../../../static/product/100/detail-1-1.jpg',
        '../../../static/product/100/detail-1-2.jpg',
        '../../../static/product/100/detail-1-3.jpg',
        '../../../static/product/100/detail-1-4.jpg',
        '../../../static/product/100/motel.jpg',
        '../../../static/product/100/info-motel.jpg',
        '../../../static/product/100/product-info-1.jpg',
        '../../../static/product/100/product-info-2.jpg',
        '../../../static/product/100/product-info-3.jpg',
        '../../../static/product/100/product-info-4.jpg'
      ],
      productData: {
        hasVideo: 1,
        imgs: ['../../../static/product/100/1.jpg',
          '../../../static/product/100/2.jpg',
          '../../../static/product/100/3.jpg',
          '../../../static/product/100/4.jpg',
          '../../../static/product/100/5.jpg'],
        infoImgs: [
          '../../../static/product/100/detail-1-1.jpg',
          '../../../static/product/100/detail-1-2.jpg',
          '../../../static/product/100/detail-1-3.jpg',
          '../../../static/product/100/detail-1-4.jpg',
          '../../../static/product/100/motel.jpg',
          '../../../static/product/100/info-motel.jpg',
          '../../../static/product/100/product-info-1.jpg',
          '../../../static/product/100/product-info-2.jpg',
          '../../../static/product/100/product-info-3.jpg',
          '../../../static/product/100/product-info-4.jpg'
        ],
        videoUrl: '../../../static/product/100/汉服视频.mp4',
        productName: '【粉腮】倾杯序原创对襟上衫一片式刺绣渐变齐胸裙女',
        youfei: 0,
        totalInventory: 270, // 总库存
        showChangNumber: 822, // 收藏数（种草数）
        size: ['S', 'M', 'L'],
        style: [
          {
            name: '粉塞齐胸预售四月底发货',
            price: 199.9,
            Inventory: 90,
            img: '../../../static/product/100/detail-1-1.jpg'
          },
          {
            name: '百塞低胸预售四月底发货',
            price: 189.9,
            Inventory: 90,
            img: '../../../static/product/100/detail-1-2.jpg'
          },
          {
            name: '冲量特价款',
            price: 177,
            Inventory: 90,
            img: '../../../static/product/100/detail-1-3.jpg'
          }
        ]
      }
    }
  },
  methods: {
    addcar () {
      if (!this.selectedStyle.name || !this.selectedStyle.size) {
        this.$toast('请选择完整的规格')
      } else {
        alert('调用后台加入购物车')
      }
    },
    buy () {
      if (!this.selectedStyle.name || !this.selectedStyle.size) {
        this.$toast('请选择完整的规格')
      } else {
        this.$router.push({path: '/createorder', params: {pid: 1}})
      }
    },
    // 单击确定时调用的方法
    clickConfirm () {
      if (!this.selectedStyle.name || !this.selectedStyle.size) {
        this.$toast('请选择完整的规格')
      } else {
        if (this.selectMemuState === 1) {
          alert('调用后台加入购物车')
        } else if (this.selectMemuState === 2) {
          let data = {
            pid: this.$route.query.pid,
            selectedStyle: this.selectedStyle,
            buyNumber: this.buyNumber,
            productName: this.productData.productName,
            youfei: this.productData.youfei
          }
          this.$router.push({path: '/createorder', query: {data: JSON.stringify(data)}})
        }
      }
    },
    // 加减数量时调用的方法
    checkNumber () {
      if (this.buyNumber > this.selectedStyle.Inventory) {
        this.buyNumber = this.selectedStyle.Inventory
      } else if (this.buyNumber < 1) {
        this.buyNumber = 1
      }
    },
    changeNumber (count) {
      this.buyNumber += count
    },
    // 选择尺寸时调用的方法
    selectSize (size) {
      let current = event.currentTarget
      if (current.classList.contains('active')) {
        current.classList.remove('active')
        this.selectedStyle.size = ''
        console.log(this.selectedStyle)
        return false
      }
      let sizes = document.getElementsByClassName('size')
      for (let size of sizes) {
        size.classList.remove('active')
      }
      current.classList.add('active')
      this.selectedStyle.size = size
      console.log(this.selectedStyle)
    },
    selectStyle (style) {
      let current = event.currentTarget
      if (current.classList.contains('active')) {
        current.classList.remove('active')
        this.selectedStyle.name = ''
        return false
      }
      let yangshis = document.getElementsByClassName('yangshi')
      for (let yangshi of yangshis) {
        yangshi.classList.remove('active')
      }
      current.classList.add('active')
      let size = this.selectedStyle.size
      this.selectedStyle = JSON.parse(JSON.stringify(style))
      this.$set(this.selectedStyle, 'size', size)
      console.log(this.selectedStyle)
    },
    closeSelectMemu () {
      const component = this.$refs.selectPop
      component.hide()
    },
    showSelectPop (selectMemuState = 0) {
      this.selectMemuState = selectMemuState
      const component = this.$refs.selectPop
      component.show()
    },
    scrollEnd () {
      console.log(this.isElementInViewport(this.myVideo))
      if (this.isElementInViewport(this.myVideo)) {
        this.isInViewArea = true
      } else {
        this.isInViewArea = false
      }
    },
    isElementInViewport (el, offset = 0) {
      let box = el.getBoundingClientRect()
      let top = (box.top >= 0)
      let left = (box.left >= 0)
      let bottom = (box.bottom <= (window.innerHeight || document.documentElement.clientHeight) + offset)
      let right = (box.right <= (window.innerWidth || document.documentElement.clientWidth) + offset)
      return (top && left && bottom && right)
    },
    slideChange (index) {
      console.log(index)
      this.count = index
      // this.initialIndex = index
      if (this.myVideo.paused) {
      } else {
        this.myVideo.pause()
      }
    },
    changeViDeoState (e) {
      let video = e.target
      if (video.paused) {
        video.play()
      } else {
        video.pause()
      }
    }
  }
}
</script>

<style lang="stylus">
@import "../../../node_modules/stylus-px2rem";
  #shopdetail
  {
    position relative
    .active
    {
      background: #ff4466!important;
      color: white;
    }
    .media{
      width: 100%
      height 200px
      .btn
      {
        position absolute
        width 100%
        top:8px
        z-index 999
        display flex
        flex-flow row nowrap
        justify-content center
        .video-btn,.img-btn
        {
          margin: 0px 5px;
          padding: 2px 5px;
          background: rgba(255, 255, 255, 0.6);
          font-size: 6px;
          border-radius 5px
        }
        .active
        {
          background: rgba(255, 100, 150, 0.8);
          color: #fff;
        }
      }
      .videoBox
      {
        width 100%
        height 200px
        overflow hidden
        .myVideo
        {
          width 100%!important
          height 200px!important
          position relative
          button.vjs-big-play-button
          {
            position absolute
            top:0
            left 0
            right 0
            bottom 0
            margin auto
          }
        }
      }
      .imgBox
      {
        width 100%
        height 200px
        img{
          width 100%
          height 100%
        }
      }
    }
    .other
    {
      .m10{
        padding 0px 4px
        text-align left
        .js_name.proname
        {
          font-size: 6px;
          line-height: 15px
        }
        .color-red
        {
          color  #ff4466 !important
          font-size 10px
        }
        .row2
        {
          display flex
          flex-flow row nowrap
          justify-content space-between
          color: #aaa
          font-size 6px
          padding 3px 2px
        }
        .gray-line
        {
          width 100%
          height 1px
          border-bottom 1px solid #eee
        }
      }
      .row3
      {
        width 100%
        height 15px
        line-height 15px
        display flex
        flex-flow row nowrap
        justify-content flex-start
        border-bottom 3px solid #f0f0f0
        padding 2px 4px
        span
        {
          display inline-block
          padding 0px 5px
          font-size 6px
          i
          {
            color deeppink
            font-size 8px
          }
        }
      }
      .pay
      {
        padding 0px 5px
        height 20px
        line-height 20px
        display flex
        flex-flow row nowrap
        justify-content space-between
        border-bottom 3px solid #f0f0f0
        .way
        {
          width 60%
          height 20px
          line-height 20px
          display flex
          flex-flow row nowrap
          justify-content space-between
          align-items center
          &>div
          {
            height 20px
            line-height 20px
            font-size 6px
            color #666
            display flex
            flex-flow row nowrap
            justify-content space-around
            span
            {
              font-size 6px
              margin 0px 2px
            }
            i {
              font-size 8px
              padding 1px 0px
            }
          }
        }
      }
      .select-area
      {
        padding 0px 4px
        height 20px
        line-height 20px
        text-align left
        border-bottom 3px solid #f0f0f0
        span
        {
          font-size:8px
        }
      }
    }
    .infoImgArea
    {
      img
      {
        width 100%
        height auto
        display block
      }
    }
    .selectMemo
    {
      padding 0px 5px
      background-color white
      .product-info
      {
        width: 100%;
        height: 40px;
        display: flex;
        flex-flow: row nowrap;
        align-items center
        position relative
        .product-img
        {
          height: 40px;
          width: 40px;
          padding 2px
          background-color: white;
          border:1px solid #f0f0f0
          margin: 0px 5px;
          transform: translateY(-15%);
          img
          {
            width 100%
            height 100%
          }
        }
        .otherInfo
        {
          text-align: left;
          line-height: 10px;
          .price-number
          {
            font-size 8px
            font-weight bolder
            color: #ff4466 !important;
          }
          div
          {
            font-size 6px
            color:#555
          }
        }
        .close-btn
        {
          width: 7px;
          height: 7px;
          line-height 7px
          border:1px solid #555
          color #555
          font-size 7px
          font-weight bolder
          border-radius: 50%;
          position absolute
          right: 2px
          top: 8px
        }
      }
      .size-area
      {
        width: 100%;
        height: 20px;
        text-align: left;
        padding 5px 0px
        border-bottom: 1px solid #f0f0f0;
        margin-top 5px
        .size
        {
          display inline-block
          padding: 2px 5px
          border-radius: .1rem;
          background: #f4f4f4;
          white-space: nowrap;
          margin: 5px 5px 0 0 ;
          float: left;
          font-size:6px;
        }
      }
      .style-area
      {
        width: 100%;
        min-height 22px
        display: inline-block;
        margin-bottom: 2px;
        padding: 5px 0px;
        border-bottom: 1px #f3f3f3 solid;
        text-align left
        p
        {
          color:#555;
          font-size 6px
          margin-bottom 2px
        }
        .yangshi{
          box-sizing border-box
          padding: 0.2rem 0.2rem;
          border-radius: 2px;
          background: #f4f4f4;
          white-space: nowrap;
          margin: 2px 2px;
          float: left;
          font-size: 5px;
        }
      }
      .number
      {
        width 100%
        height 20px
        padding 5px 0px
        border-bottom: 1px #f3f3f3 solid;
        .buytit
        {
          display inline-block
          height: 15px;
          line-height: 15px;
          float: left;
          color: #898989;
        }
        .input-number
        {
          width 60px
          height 15px
          float right
          border:none
          padding 0px 2px
          .cube-input_active
          {
            border-color none
          }
          input,div
          {
            border:none!important
          }
          i
          {
            font-size 12px
            color: deeppink;
          }
          .habit
          {
            color: #555;
          }
        }
      }
      .btn-group
      {
        width: 100%;
        height: 22px;
        line-height: 22px;
        position: absolute;
        bottom: 0px;
        left: 0px;
        z-index: 1002;
        .addcar,.buy
        {
          width: 50%;
          background-color: #ff9bae;
          color: white;
          height: 100%;
          float: left;
        }
        .buy
        {
          background-color #ff4466
        }
      }
      .confirm
      {
        width: 100%;
        height: 22px;
        line-height: 22px;
        position: absolute;
        bottom: 0px;
        left: 0px;
        z-index: 1002;
        color snow
        font-size 6px
        letter-spacing 5px
        font-weight bolder
        background-color #ff4466
      }
    }
  }
</style>
